import { getCache, addCache, clearCache } from '../cache/cache';

let timer = null;
// 延迟上报(懒上报),如果时时刻刻都上报会让服务器负载很大
export function lazyReport(type, params) {
  const appId = window['_monitor_app_id_'];
  const userId = window['_monitor_user_id_'];
  const delay = window['_monitor_delay_'];

  const logParams = {
    appId, // 项目的appId
    userId, // 用户id
    type, // error(代码方面的各种错误)/action(如点击操作)/visit(pv)/user(uv)
    data: params, // 上报的数据
    currentTime: new Date().getTime(), // 时间戳
    currentPage: window.location.href, // 当前页面
    ua: navigator.userAgent, // ua信息
  };

  let logParamsString = JSON.stringify(logParams);
  addCache(logParamsString);
  const data = getCache();

  if (delay === 0) { // delay=0相当于不做延迟上报
    report(data);
    return;
  }
  if (data.length > 10) {
    report(data);
    clearTimeout(timer);
    return;
  }
  //这里用到了节流
  clearTimeout(timer);
  timer = setTimeout(() => {
    report(data)
  }, delay);
}

export function report(data) {
  const url = window['_monitor_report_url_'];

  let arr=[]
  for(let i=0;i<data.length;i++){
    arr.push(JSON.parse(data[i]))
  }
  console.table(arr)
  //模拟上传服务器，所以下面真实的代码注释掉
  return;

  // fetch方式上报,其实就是对xhr的封装，之前有写过其封装代码。
  //存在跨域问题，并且在最后一个页面时候突然关闭软件，可能会导致数据缺失
  // fetch(url, {
  //   method: 'POST',
  //   body: JSON.stringify(data),
  //   headers: {
  //     'Content-Type': 'application/json',
  //   },
  // }).then(res => {
  //   console.log(res);
  // }).catch(err => {
  //   console.error(err);
  // })

  // navigator.sendBeacon,不会跨域也不会出现最后一个页面关闭页面时候数据缺失，但低版本浏览器兼容性不好
  // img方式上报,其实就是JSONP,之前封装过jsonp。img,src,iframe标签都可以实现。不会跨域,但可能会出现最后一个页面数据缺失问题
  // 不会有跨域问题
  if (navigator.sendBeacon) { // 支持sendBeacon的浏览器
    navigator.sendBeacon(url, JSON.stringify(data));
  } else {
    let oImage = new Image();
    oImage.src = `${url}?logs=${data}`;
  }
  clearCache();
}
